<template>
<view class="container">
  <view class="cate-nav">
    <scroll-view scroll-x="true" class="cate-nav-body" style="width: 750rpx;" :scroll-left="scrollLeft">
      <view v-for="(item, index) in navList" :key="index" :class="'item ' + ( id == item.id ? 'active' : '')" :data-id="item.id" :data-index="index" @tap="switchCate">
        <view class="name jhx_f7">{{item.name}}</view>
      </view>
    </scroll-view>
  </view>
  <scroll-view scroll-y="true" :scroll-top="scrollTop" :style="'height:' + scrollHeight + ';'">

    <view class="cate-item">
      <!-- <view class="h">
        <text class="name">{{currentCategory.name}}</text>
        <text class="desc">{{currentCategory.frontName}}</text>
      </view> -->
      <view class="b">
        <navigator v-for="(iitem, iindex) in goodsList" :key="iindex" :class="'item ' + ((iindex + 1) % 2 == 0 ? 'item-b' : '')" :url="'/pages/goods/goods?id=' + iitem.id">
          <image class="img" :src="iitem.picUrl" background-size="cover"></image>
          <text class="name jhx_f2">{{iitem.name}}</text>
          <view class="price">
            <view class="priceTg jhx_f8">￥{{iitem.retailPrice}}</view>
            <view class="brokerage" v-if="isAgent && iitem.brokeragePrice>0.01">赚￥{{iitem.brokeragePrice}}</view>
            <view class="brokerage" v-else>立即购买</view>
          </view>
        </navigator>
      </view>
    </view>
  </scroll-view>
</view>
</template>

<script>
let util = require("../../utils/util.js");
let api = require("../../config/api.js");

export default {
  data() {
    return {
      navList: [],
      goodsList: [],
      id: 0,
      currentCategory: {},
      scrollLeft: 0,
      scrollTop: 0,
      scrollHeight: 0,
      isAgent: false,
      page: 1,
      size: 10,
      totalPages: 1
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    let that = this;

    if (options.id) {
      that.setData({
        id: parseInt(options.id)
      });
    }

    uni.getSystemInfo({
      success: function (res) {
        that.setData({
          scrollHeight: res.windowHeight
        });
      }
    });
    this.getCategoryInfo();
  },
  onReady: function () {
    // 页面渲染完成
    let that = this;
    let userInfo = uni.getStorageSync('userInfo');

    if (userInfo && userInfo.userLevel == 2) {
      that.setData({
        isAgent: true
      });
    }
  },
  onShow: function () {
    // 页面显示
    let that = this;
    let userInfo = uni.getStorageSync('userInfo');

    if (userInfo && userInfo.userLevel == 2) {
      that.setData({
        isAgent: true
      });
    }
  },
  onHide: function () {// 页面隐藏
  },
  onUnload: function () {// 页面关闭
  },
  onReachBottom: function () {
    if (this.totalPages > this.page) {
      this.setData({
        page: this.page + 1
      });
    } else {
      uni.showToast({
        title: '已经到底了!',
        icon: 'none',
        duration: 2000
      });
      return false;
    }

    this.getGoodsList();
  },
  methods: {
    getCategoryInfo: function () {
      let that = this;
      util.request(api.GoodsCategory, {
        id: this.id
      }).then(function (res) {
        if (res.errno == 0) {
          that.setData({
            navList: res.data.brotherCategory,
            currentCategory: res.data.currentCategory
          });
          uni.setNavigationBarTitle({
            title: res.data.parentCategory.name
          }); // 当id是L1分类id时，这里需要重新设置成L1分类的一个子分类的id

          if (res.data.parentCategory.id == that.id) {
            that.setData({
              id: res.data.currentCategory.id
            });
          } //nav位置


          let currentIndex = 0;
          let navListCount = that.navList.length;

          for (let i = 0; i < navListCount; i++) {
            currentIndex += 1;

            if (that.navList[i].id == that.id) {
              break;
            }
          }

          if (currentIndex > navListCount / 2 && navListCount > 5) {
            that.setData({
              scrollLeft: currentIndex * 60
            });
          }

          that.getGoodsList();
        } else {//显示错误信息
        }
      });
    },
    getGoodsList: function () {
      let that = this;
      util.request(api.GoodsList, {
        categoryId: that.id,
        page: that.page,
        size: that.size
      }).then(function (res) {
        that.setData({
          goodsList: that.goodsList.concat(res.data.goodsList),
          totalPages: res.data.totalPages
        });
      });
    },
    switchCate: function (event) {
      if (this.id == event.currentTarget.dataset.id) {
        return false;
      }

      let that = this;
      let clientX = event.detail.x;
      let currentTarget = event.currentTarget;

      if (clientX < 60) {
        that.setData({
          scrollLeft: currentTarget.offsetLeft - 60
        });
      } else if (clientX > 330) {
        that.setData({
          scrollLeft: currentTarget.offsetLeft
        });
      }

      this.setData({
        id: event.currentTarget.dataset.id,
        goodsList: [],
        page: 1,
        totalPages: 1
      });
      this.getCategoryInfo();
    }
  }
};
</script>
<style>
.container {
  background: #f9f9f9;
}

.cate-nav {
  position: fixed;
  left: 0;
  top: 0;/*  #ifdef  H5  */
  top: calc(88rpx + constant(safe-area-inset-top));
  top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
  z-index: 1000;
}

.cate-nav-body {
  height: 84rpx;
  white-space: nowrap;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.cate-nav .item {
  display: inline-block;
  height: 84rpx;
  min-width: 130rpx;
  padding: 0 15rpx;
}

.cate-nav .item .name {
  display: block;
  height: 84rpx;
  padding: 0 20rpx;
  line-height: 84rpx;
  width: auto;
}

.cate-nav .item.active .name {
  color: #FF654B;
  border-bottom: 2px solid #FF654B;
}

.cate-item {
  margin-top: 94rpx;
  height: auto;
  overflow: hidden;
}

.cate-item .h {
  height: 145rpx;
  width: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cate-item .h .name {
  display: block;
  height: 35rpx;
  margin-bottom: 18rpx;
  font-size: 30rpx;
  color: #333;
}

.cate-item .h .desc {
  display: block;
  height: 24rpx;
  font-size: 24rpx;
  color: #999;
}

.cate-item .b {
  width: 750rpx;
  padding: 0 6.25rpx;
  height: auto;
  overflow: hidden;
}

.cate-item .b .item {
  float: left;
  background: #fff;
  width: 365rpx;
  margin-bottom: 6.25rpx;
  padding-bottom: 33.333rpx;
  height: auto;
  overflow: hidden;
  text-align: center;
}

.cate-item .b .item-b {
  margin-left: 6.25rpx;
}

.cate-item .item .img {
  width: 302rpx;
  height: 302rpx;
}

.cate-item .item .name {
  display: block;
  width: 365.625rpx;
  height: 35rpx;
  margin: 11.5rpx 0 22rpx 0;
  text-align: center;
  overflow: hidden;
  padding: 0 20rpx;
  font-size: 30rpx;
  color: #333;
}

.cate-item .item .price {
  display: flex;
  width: 365.625rpx;
  height: 50rpx;
  text-align: center;
  color: #ec4223;
}

.cate-item .b .priceTg {
  width: 55%;
}

.cate-item .b .brokerage {
  float: right;
  background: #e68d08;
  border-radius: 20rpx;
  color: #fff;
  min-width: 135rpx;
  text-align: center;
  height: 25px;
  line-height: 25px;
}
</style>